<template>
  <div class="mine" ref="mine">
    <!--  导航开始 -->
    <div class="mineHead" :style="{'backgroundImage':'url('+ mineBackground +')'}">
      <div class="mineHeader">
        <!-- 两端对齐 -->
        <van-row class="headerAll" type="flex" justify="space-between" align="center">
          <van-col span="4"  class="leftImg" @click="goBack()">
            <img src="http://job.dayinyun.com/back.png" alt="">
          </van-col>
          <van-col span="16" justify="center" align="center" class="centerTitle">{{title}}</van-col>
          <van-col span="4" justify="end" align="end" class="rightTitle" @click="upLoadBg()">
            {{subtitle}}
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="content">
      <div class="contentList">
        <!--      头像-->
        <div class="headImg flex-space-between">
          <!--        头像-->
          <img :src="personalData.avatar?personalData.avatar:'http://job.dayinyun.com/defaultImg.png'" alt="">
          <!--        按钮-->
          <button @click="setSystem">系统设置</button>
          <button>测试视频</button>
        </div>
        <!--      名称-->
        <router-link class="name" to="myPersonalData">
          <div class="nameWord flex-space-between">
            <h2>{{personalData.nickname}}</h2>
            <img src="http://job.dayinyun.com/rightIcon.png" alt="">
          </div>
          <p class="twoDot">{{personalData.describe?personalData.describe:"写点什么吧！"}}</p>
        </router-link>
        <!--      我的数据-->
        <div class="commonBg commonContainer">
          <div class="title flex-start borderBottom">
            <div>我的数据</div>
          </div>
          <div class="lists flex-space-between">
            <!--          粉丝-->
            <div class="listItems borderRight borderBottom">
              <h3 class="flex-start">粉丝</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userData.fans_count*1?userData.fans_count*1:0 | dataWord}}</div>
                <div v-if="userData.fans_count_diff*1>0">+{{userData.fans_count_diff*1}}</div>
              </div>
            </div>
            <!--          点赞-->
            <div class="listItems borderBottom">
              <h3 class="flex-start">点赞</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userData.digg_count*1?userData.digg_count*1:0 | dataWord}}</div>
                <div v-if="userData.digg_count_diff*1>0">+{{userData.digg_count_diff*1}}</div>
              </div>
            </div>
            <!--          作品-->
            <div class="listItems borderRight borderBottom">
              <h3 class="flex-start">作品</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userData.video_count*1?userData.video_count*1:0 | dataWord}}</div>
                <div v-if="userData.video_count_diff*1>0">+{{userData.video_count_diff*1}}</div>
              </div>
            </div>
            <!--          合约-->
            <div class="listItems borderBottom">
              <h3 class="flex-start">合约</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userData.contract_count*1?userData.contract_count*1:0 | dataWord}}</div>
                <div v-if="userData.contract_count_diff*1>0">+{{userData.contract_count_diff*1}}</div>
              </div>
            </div>
            <!--          收益-->
            <div class="listItems borderRight">
              <h3 class="flex-start">收益</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userData.profit_amount*1?userData.profit_amount*1:0 | dataWord}}</div>
                <div v-if="userData.profit_amount_diff*1>0">+{{userData.profit_amount_diff*1}}</div>
              </div>
            </div>
          </div>
        </div>
        <!--      我的消息-->
        <div class="commonBg commonContainer">
          <div class="title flex-space-between borderBottom">
            <div>我的消息</div>
            <div @click="myMsg(0)" class="flex-end">
              全部消息
              <img src="http://job.dayinyun.com/rightIcon.png" alt="">
            </div>
          </div>
          <!--        key：类型(1：系统 2：客服 3：私信 4：商家)-->
          <div class="lists flex-space-between">
            <!--          粉丝-->
            <div @click="myMsg(3)" class="listItems borderBottom borderRight">
              <h3 class="flex-start">粉丝</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userMsg[3]?userMsg[3]:0 | dataWord}}</div>
              </div>
            </div>
            <!--          商家-->
            <div @click="myMsg(4)" class="listItems borderBottom">
              <h3 class="flex-start">商家</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userMsg[4]?userMsg[4]:0 | dataWord}}</div>
              </div>
            </div>
            <!--          系统-->
            <div @click="myMsg(1)" class="listItems borderRight">
              <h3 class="flex-start">系统</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userMsg[1]?userMsg[1]:0 | dataWord}}</div>
              </div>
            </div>
            <!--          客服-->
            <div @click="myMsg(2)" class="listItems">
              <h3 class="flex-start">客服</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userMsg[2]?userMsg[2]:0 | dataWord}}</div>
              </div>
            </div>
          </div>
        </div>
        <!--      我的钱包-->
        <div class="commonBg commonContainer">
          <div class="title flex-start borderBottom">
            <div>我的钱包</div>
          </div>
          <div class="lists flex-space-between">
            <!--          矿金-->
            <div class="listItems borderRight">
              <h3 class="flex-start">矿金</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{goldTotal*1?goldTotal*1:0 | dataWord}}</div>
              </div>
            </div>
            <!--          余额-->
            <router-link to="myBalance" class="listItems">
              <h3 class="flex-start">余额</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{balanceTotal*1?balanceTotal*1:0 | dataWord}}</div>
              </div>
            </router-link>
          </div>
        </div>
        <!--      其余我的-->
        <div class="commonBg commonOneContainer">
          <!--        我的店铺-->
          <router-link to="myStore" class="commonOneContent borderBottom flex-space-between">
            <div class="flex-start">
              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon1.png" alt="">
              <h4>我的店铺</h4>
            </div>
            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">
          </router-link>
          <!--        商城订单-->
          <div @click="myStoreOrder" class="commonOneContent borderBottom flex-space-between">
            <div class="flex-start">
              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon2.png" alt="">
              <h4>商城订单</h4>
            </div>
            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">
          </div>
          <!--        银发订单-->
          <router-link to="grayHairOrder" class="commonOneContent borderBottom flex-space-between">
            <div class="flex-start">
              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon3.png" alt="">
              <h4>银发订单</h4>
            </div>
            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">
          </router-link>
          <!--        我的认证-->
          <router-link to="myCertification" class="commonOneContent borderBottom flex-space-between">
            <div class="flex-start">
              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon4.png" alt="">
              <h4>我的认证</h4>
            </div>
            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">
          </router-link>
          <!--        我的推广-->
          <div @click="myExtension()" class="commonOneContent borderBottom flex-space-between">
            <div class="flex-start">
              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon5.png" alt="">
              <h4>我的推广</h4>
            </div>
            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">
          </div>
          <!--        我是专家-->
          <div @click="myExpert()" class="commonOneContent borderBottom flex-space-between">
            <div class="flex-start">
              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon6.png" alt="">
              <h4>我是专家</h4>
            </div>
            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">
          </div>
          <!--        热榜-->
<!--          <div class="commonOneContent borderBottom flex-space-between">-->
<!--            <div class="flex-start">-->
<!--              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon8.png" alt="">-->
<!--              <h4>热榜</h4>-->
<!--            </div>-->
<!--            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">-->
<!--          </div>-->
          <!--        实名认证-->
          <div @click="realName()" class="commonOneContent borderBottom flex-space-between">
            <div class="flex-start">
              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon12.png" alt="">
              <h4>实名认证</h4>
            </div>
            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">
          </div>
          <!--        扫一扫-->
          <div @click="myScan()" class="commonOneContent borderBottom flex-space-between">
            <div class="flex-start">
              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon10.png" alt="">
              <h4>扫一扫</h4>
            </div>
            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">
          </div>
          <!--        少年模式-->
<!--          <div class="commonOneContent borderBottom flex-space-between">-->
<!--            <div class="flex-start">-->
<!--              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon7.png" alt="">-->
<!--              <h4>少年模式</h4>-->
<!--            </div>-->
<!--            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">-->
<!--          </div>-->

          <!--        清除缓存-->
          <div @click="clearCache" class="commonOneContent borderBottom flex-space-between">
            <div class="flex-start">
              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon11.png" alt="">
              <h4>清除缓存</h4>
            </div>
            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">
          </div>
          <!--        更多-->
          <div @click="setSystem" class="commonOneContent flex-space-between">
            <div class="flex-start">
              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon9.png" alt="">
              <h4>更多</h4>
            </div>
            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">
          </div>
<!--          直播-->
          <div @click="liveBroadcast" class="commonOneContent flex-space-between">
            <div class="flex-start">
              <img class="mineIcon" src="http://job.dayinyun.com/mineIcon9.png" alt="">
              <h4>直播</h4>
            </div>
            <img class="rightIcon" src="http://job.dayinyun.com/rightIcon.png" alt="">
          </div>
        </div>
      </div>
      <!--      我的视频分类-->
      <div class="videoLists">
        <!--      tab 切换-->
        <tabs :tabList="tabList" @goCenter="changeTab"></tabs>
        <!--    我的视频列表-->
        <!--    下拉刷新-->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-if="videoList&&videoList.length*1>0"
            v-model="loading"
            :finished="finished"
            :offset="20"
            :immediate-check="false"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="videoList flex-space-between">
              <div class="videoItems" v-for="(item,index) in videoList" :key="index" @click="goVideoDetails(item,index)">
                <!--          视频-->
                <div class="videoBg">
                  <img class="videoCover" :src="item.video.cover_url" alt="">
                  <div class="number flex-start">
                    <div class="itemsNumber goodNumber flex-start">
                      <img src="http://job.dayinyun.com/mineIconGood.png" alt="">
                      {{item.video.statistics.digg_count?item.video.statistics.digg_count:0 | dataWord}}
                    </div>
                    <div class="itemsNumber playNumber flex-start">
                      <img src="http://job.dayinyun.com/mineIconPlay.png" alt="">
                      {{item.video.statistics.play_count?item.video.statistics.play_count:0 | dataWord}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
          <div class="noData flex-space-center" v-else>
            暂无内容！<br/>
            您还没有喜欢过内容
          </div>
        </van-pull-refresh>
      </div>
    </div>

<!--    滑动以后固定顶部显示-->
    <commonHeader v-if="headerShow" :title="title" @goBack="goBack"></commonHeader>
<!--    上传背景-->
    <cropperImg ref="cropperImg" :aspectRatio="aspectRatio" @saveBackground="saveBackground"></cropperImg>

  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader.vue"
  import cropperImg from "../../components/cropperImg.vue"
  import tabs from '../../components/tabs'
  import {GETBALANCETOTAL, GETGOLDTOTAL, GETUSERMSG, GETUSERDATA, GETUSERINFO, GETWORKLIST, GETLIKEWORKLIST} from "../../apis/mine";
  import {getCookie,getStore,setStore} from "../../commonUtil/mUtils";
  export default {
    name:"mine",
    components:{
      commonHeader,
      cropperImg,
      tabs
    },
    data() {
      return {
        title:"我的",
        subtitle:"上传背景",
        headerShow:false,//固定顶部显示
        mineBackground:'http://job.dayinyun.com/mineBg.png',//背景图
        userData:{},//我的数据
        userMsg:{},//我的消息
        balanceTotal:0,//我的余额总数
        goldTotal:0,//我的矿金总数
        personalData:{},//个人资料
        aspectRatio:750 / 233,//裁剪图片比例
        tabList:[
          {
            name:"作品",
            guid:0,
          },
          {
            name:"喜欢",
            guid:1,
          }
        ],//tab列表
        videoTabIndex:3,//视频tab下标
        videoList:[],//视频列表
        // 上拉加载下拉刷新配置
        loading: false,//
        finished: false,//上拉加载完毕
        refreshing: false,//下拉刷新
        page:1,//分页页数
        pageSize:10,//每页数据
      }
    },
    mounted() {
      // 把路径里面的token 存起来
      let token = this.$route.query.token?this.$route.query.token:''
      if(getStore('token')!='undefined'){
        setStore('token',token);
      }
      // this.$loading()
      // 监听页面滑动
      window.addEventListener("scroll", this.handleScroll, true);
      // 获取用户详情
      this.getuserinfo()
      // 获取我的数据
      this.getUserData();
      // 获取我的余额总数
      this.getBalanceTotal();
      // 获取我的矿金总数
      this.getGoldTotal();
      // 获取我的消息
      this.getUserMsg();
      // 获取我的作品列表
      this.getVideoList(0)
    },
    methods:{
      // 返回
      goBack(){
        if (window.history.length>1){
          window.history.go(-1)
        }else {
          if (this.$systemInfo() === "android") {
            window.android.closeCurrentPage();
          } else if (this.$systemInfo() === "ios") {
            window.webkit.messageHandlers.closeCurrentPage.postMessage(null);
          }
        }
      },
      // 清除缓存
      clearCache(){
        if (this.$systemInfo()==='android'){
          window.android.clearCache();
        }else if(this.$systemInfo()==='ios') {
          window.webkit.messageHandlers.clearCache.postMessage(null);
        }
      },
      // 系统设置
      setSystem(){
        if (this.$systemInfo()==='android'){
          window.android.toSetting();
        }else if(this.$systemInfo()==='ios') {
          window.webkit.messageHandlers.toSetting.postMessage(null);
        }
      },
      // 我的消息
      myMsg(type){
        var url = escape('https://fme.hongjitimes.com/mine')
        window.location.href = 'https://fmsg.hongjitimes.com/#/?type=' + type + '&url=' + url
      },
      // 商场订单
      myStoreOrder(){
        window.location.href = 'https://shop.hongjitimes.com/#/my/order?urltype=' + 'me'
      },
      // 我的推广
      myExtension(){
        window.location.href = 'https://whcpc.hongjitimes.com/#/?urltype=' + 'me'
      },
      // 我是专家
      myExpert(){
        window.location.href = 'https://fexpert.hongjitimes.com/?urltype=' + 'me'
      },
      // 实名认证
      realName(){
        this.removesesStore("fullPath");
        this.setsesStore("fullPath", this.$route.fullPath);
        this.$router.push("realName");
      },
      // 扫一扫
      myScan(){
        let type = 2;
        if (this.$systemInfo() === "android") {
          window.android.toQrScanning(type);
        } else if (this.$systemInfo() === "ios") {
          window.webkit.messageHandlers.toQrScanning.postMessage(type);
        }
      },
      // 直播
      liveBroadcast(){
        let title = "测试直播"
        let coverUrl = "http://job.dayinyun.com/123.jpeg"
        if (this.$systemInfo() === "android") {
          window.android.initiateLive(title,coverUrl);
        } else if (this.$systemInfo() === "ios") {
          window.webkit.messageHandlers.initiateLive.postMessage(title,coverUrl);
        }
      },
      // 页面滑动事件
      handleScroll(){
        if(!this.$refs.mine) return;
        this.$nextTick(()=>{
          let topNumber
          // 平台补贴区距离顶部的距离
          topNumber  = this.$refs.mine.getBoundingClientRect().top
          this.headerShow = topNumber*1<-100?true:false;
        })
      },
      // 初始化下拉加载
      loadingInit(){
        //清空课程列表 下拉加载初始化
        this.videoList = [];
        this.loading = false;
        this.finished = false;
        this.refreshing =false;
        this.page = 1;
      },
      // 切换tab
      changeTab(item){
        this.videoTabIndex = item.guid*1+3
        // 初始化
        this.loadingInit()
        // 获取视频列表
        this.getVideoList()
      },
      // 点击 作品 喜欢跳转到视频详情
      goVideoDetails(item,index){
        let params = {"page":parseInt(index / 10)*1+1,"count":this.pageSize,"video_id":item.video.item_id,"user_id":'',type:this.videoTabIndex}
        params = JSON.stringify(params)
        if (this.$systemInfo() === "android") {
          window.android.toVideoListPageTwo(params);
        } else if (this.$systemInfo() === "ios") {
          window.webkit.messageHandlers.toVideoListPageTwo.postMessage(params);
        }
      },
      // -------------------接口开始------------------
      // 上传图片
      upLoadBg(){
        this.$refs.cropperImg.clickUploadBeforeImg();
      },
      // 获取我的数据
      getUserData(){
        let getUserData = GETUSERDATA
        getUserData().then(res=>{
          if(res.data.code*1===200){
            this.userData = res.data.data;
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // 获取我的消息
      getUserMsg(){
        let getUserMsg = GETUSERMSG
        getUserMsg().then(res=>{
          if(res.data.code*1===200){
            this.userMsg = res.data.data?res.data.data[0]:{};
          } else {
            // this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // 获取我的余额总数
      getBalanceTotal(){
        let getBalanceTotal = GETBALANCETOTAL
        getBalanceTotal().then(res=>{
          if(res.data.code*1===200){
            this.balanceTotal = res.data.data.balance?res.data.data.balance:0;//余额总数
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // 获取我的矿金总数
      getGoldTotal(){
        let getGoldTotal = GETGOLDTOTAL
        getGoldTotal().then(res=>{
          if(res.data.code*1===200){
            this.goldTotal = res.data.data.user_gold?res.data.data.user_gold:0;//矿金总数
          } else {
            console.log(res.data.message)
            // this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // 获取用户详情
      getuserinfo(){
        var that=this;
        let getuserinfo=GETUSERINFO;
        getuserinfo().then(res=>{
          that.personalData = res.data.data;//个人资料
          that.mineBackground = that.personalData.background?that.personalData.background:'http://job.dayinyun.com/mineBg.png';//背景图
        })
      },
      // 保存用户背景图片
      saveBackground(){
        // 刷新页面
        if (this.$systemInfo() === "ios") {
          window.webkit.messageHandlers.webviewReload.postMessage(null);
        }
        this.getuserinfo();//刷新页面
      },
      // 获取视频列表
      getVideoList(){
        // GETWORKLIST 我的作品  GETLIKEWORKLIST  我喜欢的作品
        // type 3 我的作品 4 我喜欢的作品
        let getVideoList = this.videoTabIndex*1==3 ? GETWORKLIST : GETLIKEWORKLIST
        // let getVideoList =GETWORKLIST
        let params = {
          index:this.page,//页数
          count:this.pageSize,//每页记录数
        }
        getVideoList(params).then( res => {
          if(res.data.code*1===200){
            // 下拉刷新
            if (this.refreshing) {
              this.videoList = [];
              this.refreshing = false;
            }
            // 关闭加载中
            this.loading = false;
            const videoList = res.data.data.list;//课程列表
            if(videoList == null || videoList.length*1 === 0){
              this.finished = true
              // return
            }
            if(videoList.length*1 < this.pageSize){
              this.finished = true
            }
            if(this.page*1 == 1){
              this.videoList = [];//清空数组
              this.videoList = videoList
            }else{
              this.videoList = this.videoList.concat(videoList)
            }
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 上拉加载
      onLoad() {
        this.page++;
        this.getVideoList();//获取视频列表
      },
      // 下拉刷新
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.page=1;
        this.getVideoList();//获取视频列表
      },
      // ------------------------接口结束------------------
    },
    filters:{
      // 筛选 大于一万的显示 万字
      dataWord(item){
       return item*1>10000?item*1/10000 + 'w':item*1
      }
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .mine{
    width:100%;
    position: relative;
    .mineHead{
      width:100%;
      height:2.33rem;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding-top: 0.5rem;
      box-sizing: border-box;
      .mineHeader{
        width:100%;
        height:0.88rem;
        padding: 0 0.3rem ;
        box-sizing: border-box;
        .headerAll{
          width:100%;
          height:0.88rem;
          .leftImg{
            height:0.28rem;
            img{
              width:0.28rem;
              height:0.28rem;
            }
          }
          .centerTitle{
            font-size:@fontSize40;
            font-family:@fontFamily400;
            font-weight:@fontWeight500;
            line-height:0.4rem;
            color:#FFFFFF;
          }
          .rightTitle{
            font-size:@fontSize28;
            font-family:@fontFamily400;
            font-weight:@fontWeight400;
            line-height:0.4rem;
            color:#FFFFFF;
          }
        }
      }
    }
    .content{
      width:100%;
      position: absolute;
      top:1.64rem;
      z-index:10;
      margin-bottom:0.5rem;
      .contentList{
        width:100%;
        padding:0 0.3rem;
        box-sizing: border-box;
        .headImg{
          img{
            width:2.06rem;
            height:2.06rem;
            border-radius: 50%;
            border:0.06rem solid #000000;
          }
          button{
            width:1.7rem;
            height: 0.6rem;
            background: #232323;
            font-size:@fontSize30;
            font-family:@fontFamily400;
            font-weight:@fontWeight500;
            color:#ffffff;
            margin-top:0.3rem;
          }
        }
        .name{
          width:100%;
          padding:0.16rem 0;
          box-sizing: border-box;
          .nameWord{
            h2{
              flex:1;
              font-size:@fontSize44;
              font-family:@fontFamily400;
              font-weight:@fontWeight600;
              color:#ffffff;
              margin-right:0.2rem;
            }
            img{
              width:0.26rem;
              height:auto;
            }
          }
          p{
            width:100%;
            font-size:@fontSize28;
            font-family:@fontFamily400;
            font-weight:@fontWeight400;
            color:#999999;
            text-align: justify;
            line-height:0.4rem;
            margin-bottom:0.3rem;
          }
        }
        .commonContainer{
          width:100%;
          .title{
            width:100%;
            height:0.93rem;
            padding:0 0.28rem;
            box-sizing: border-box;
            font-size:@fontSize34;
            font-family:@fontFamily400;
            font-weight:@fontWeight500;
            color:#FFFFFF;
            img{
              width:0.26rem;
              height:auto;
              margin-left:0.08rem;
            }
          }
          .lists{
            width:100%;
            flex-wrap: wrap;
            .listItems{
              width:50%;
              height:1.38rem;
              padding:0.22rem 0.28rem;
              box-sizing: border-box;
              h3{
                font-size:@fontSize34;
                font-family:@fontFamily400;
                font-weight:@fontWeight500;
                color:#FFFFFF;
                margin-bottom:0.06rem;
              }
              .listItemsNum{
                font-size:@fontSize28;
                font-family:@fontFamily400;
                font-weight:@fontWeight500;
                color:#999999;
                div:nth-of-type(2){
                  color:#FC0B1C;
                }
              }
            }

          }
        }
        .commonOneContainer{
          width:100%;
          padding:0 0.3rem;
          box-sizing: border-box;
          .commonOneContent{
            width:100%;
            height:1.17rem;
            .mineIcon{
              width:0.5rem;
              height:auto;
              margin-right:0.16rem
            }
            h4{
              font-size:@fontSize34;
              font-family:@fontFamily400;
              font-weight:@fontWeight500;
              color:#ffffff;
            }
            .rightIcon{
              width:0.28rem;
              height:auto;
            }
          }

        }
      }
      .videoLists{
        width:100%;
        margin-top:0.35rem;
        .videoList{
          width:100%;
          flex-wrap: wrap;
          margin-top: 0.23rem;
          .videoItems{
            width:3.73rem;
            height:4.52rem;
            margin-right:0.04rem;
            margin-bottom:0.04rem;
            .videoBg{
              width:3.73rem;
              height:4.52rem;
              position: relative;
              background:#232323;
              img.videoCover{
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
              .number{
                position: absolute;
                bottom:0;
                left: 0;
                right:0;
                height:0.88rem;
                background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
                padding:0 0.2rem;
                box-sizing: border-box;
                line-height:0.3rem;
                .itemsNumber{
                  font-size:@fontSize28;
                  font-family:@fontFamily400;
                  font-weight:@fontWeight400;
                  color:@whiteColor;
                  img{
                    width:0.3rem;
                    height:auto;
                    margin-right: 0.1rem;
                  }
                }
                .goodNumber{
                  margin-right: 0.3rem;
                }
              }
            }
          }
          .videoItems:nth-of-type(2n){
            margin-right: 0rem;
          }
        }
        .noData{
          width:100%;
          height:5rem;
          color:#ffffff;
          line-height: 0.4rem;
          text-align: center;
        }
      }
    }
    .commonBg{
      width:100%;
      background: #232323;
      border-radius: 0.1rem;
      margin-bottom:0.2rem;
    }
    .borderBottom{
      border-bottom: 0.02rem solid #444444;
    }
    .borderRight{
      border-right: 0.02rem solid #444444;
    }
    /*滑动以后顶部导航*/
    /deep/.head{
      .header{
        border-bottom: none;
      }
    }
    /*上传背景*/
    /deep/.cropper-view-box{
      width:100%;
      height:2.33rem;
    }
  }
</style>
